import React, { memo ,useState,useEffect} from 'react'
import {useSelector,shallowEqual,useDispatch} from 'react-redux'
import {HNSongListWrap} from './style'
import HNThemeCover from 'components/theme-cover'
import {getCatagorySongsAction} from '../../store/actionCreators'
import {PER_PAGE_NUMBER} from '../../store/constant'
import HNPagniation from 'components/pagniation'
export default memo(function HNSongList() {

    const [currentPage,setCurrentPage] = useState(0);
    const {catagorySongs,currentCatagory} = useSelector(state => ({
        catagorySongs : state.getIn(["songs","catagorySongs"]),
        currentCatagory : state.getIn(["songs","currentCatagory"]),
      }),shallowEqual)

    useEffect(() => {
        setCurrentPage(1);
    }, [currentCatagory])

    const dispatch = useDispatch();
    const songList = catagorySongs.playlists || [];
    const total = catagorySongs.total || 0;
    const onChange = (page,pageSize) =>{
        setCurrentPage(page);
        dispatch(getCatagorySongsAction(page));
    }
    return (
        <div>
            <HNSongListWrap className="wrap-v2">
            {
                songList.map((item,index)=>{
                    return(
                        <HNThemeCover item={item} key={item.id} className="song-item"/>
                    )
                })
            }
        </HNSongListWrap>
        <HNPagniation totalSize={total} 
                      onChange={onChange} 
                      currentPage={currentPage}
                      pageSize={PER_PAGE_NUMBER}/>
        </div>
    )
})
